<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>过渡效果</title>

        <style type="text/css">

            .wrapper {
                 width: 200px ; 
                 height: 200px ; 
                 background: #dedede ; 
                 margin: 25px auto ; 
                 border: 1px solid blue ; 
                 /* 设置用来进行过渡的 CSS 属性 */
                 transition-property: width ; /* 明确过渡效果针对哪个属性 */
                 /* 设置过渡进行的时间长度 */
                 transition-duration: 5s ; /* 规定完成过渡效果需要花费的时间（以秒或毫秒计） */

            }

            .first { 
                /* 设置过渡进行的时序函数 */
                transition-timing-function: linear ; /* 匀速 */
            }
            .first:hover {  width: 800px ;  }

            .second { 
                /* 设置过渡进行的时序函数 */
                transition-timing-function: ease ; /* 慢速开始，然后变快，然后慢速结束的过渡效果 */
            }
            .second:hover {  width: 800px ;  }

            .third {  
                transition-timing-function: ease ; 
                transition-delay: 3s ;
            }
            .third:hover {  width: 800px ;  }

        </style>

    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>
        
    </body>
</html>